<template>
  <el-dialog
    v-model="localShowDialog"
    :width="dialogWidth"
    title="公告详情"
    :modal="true"
    @close="handleClose"
    :destroy-on-close="true"
    :style="{ borderRadius: '8px' }"
  >
    <div class="dialog-content">
      <div style="width: 100%; height: 1px; background-color: #dadada"></div>

      <!-- <h3 class="notice-title">{{ noticeInfo.title }}</h3> -->

      <div class="ql-editor notice-content" v-html="processRichText(noticeInfo.content)"></div>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup name="NoticeDialog">
import { useAppStore } from '@/stores';
import app from '@/utils/app';
const appStore = useAppStore();

import { ref, watch } from 'vue';
const props = defineProps({
  //页面展示类型  pc  mobile
  pageType: {
    type: String,
    default: 'pc'
  },
  showDialog: {
    type: Boolean,
    default: false
  },
  noticeInfo: {
    type: Object,
    default: () => ({})
  },
  inputHeight: {
    type: String,
    default: '30px'
  }
});
// 根据 dialogType 计算对话框宽度
const dialogWidth = props.pageType === 'pc' ? '60%' : '80%';

const localShowDialog = ref(props.showDialog); // 使用 ref 响应外部变化

// 监听 prop 中的 showDialog 变化
watch(
  () => props.showDialog,
  (newVal) => {
    localShowDialog.value = newVal;
  }
);
const emit = defineEmits(['update:showDialog']);
function handleClose() {
  localShowDialog.value = false; // 修改本地状态
  emit('update:showDialog', false); // 通知父组件关闭
}

function processRichText(text: string) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, 'text/html');
  const images = doc.querySelectorAll('img');
  if (!images || images.length == 0) {
    return text;
  }

  images.forEach((img) => {
    img.src = `${app.api}/sys/oss/download?token=${appStore.userToken}&url=${decodeURIComponent(img.src)}`; // 创建一个URL对象
  });

  const serializer = new XMLSerializer();
  return serializer.serializeToString(doc.body);
}
</script>
<style scoped lang="scss">
 $input-height: v-bind('$props.inputHeight');
 @import '@/styles/setInputHeight.scss';
.notice-title {
  margin-top: 16px;
  width: 100%;
  text-align: center;
  color: #333333;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.notice-content {
  margin-top: 16px;
  width: 100%;
  max-height: 400px;
  text-align: justify;
  color: #383838;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  overflow-y: auto;
  padding: none;
}

.dialog-content {
  display: flex;
  flex-direction: column;
}
</style>
